<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="68px">
            <el-row>
                <el-card shadow="always" style="margin-bottom: 10px;">
                    <el-divider content-position="left">部门归属等级</el-divider>
                    <el-radio-group v-model="queryParams.level" size="mini">
                        <el-radio border key="2" v-show="rightType<=2" label="2">分公司</el-radio>
                        <el-radio border key="3" v-show="rightType<=3" label="3">分区</el-radio>
                        <el-radio border key="4" v-show="rightType<=4" label="4">部门归属</el-radio>
                        <el-radio border key="6"  label="6">个人</el-radio>
                    </el-radio-group>
                    <el-divider content-position="left">状态</el-divider>
                    <el-radio-group v-model="queryParams.status" size="mini">
                        <el-radio border key="-1" label="-1">全部</el-radio>
                        <el-radio v-for="dict in dict.type.crm_customerStatus" border v-if="dict.value!=0"  :key="dict.value" :label="dict.value">{{dict.label }}</el-radio>
                    </el-radio-group>
                </el-card>
            </el-row>
            <el-row>
                <el-col :span="24" >
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5"></el-col>
        </el-row>
        <el-table v-loading="loading" :data="publicCustList" show-summary>
            <el-table-column label="用户" align="center" prop="user_name" v-if="queryParams.level==6" />
            <el-table-column label="部门归属" align="center" prop="dept_name" v-if="queryParams.level!=6" />
            <el-table-column label="跟进中总数" align="center" prop="total_need_follow_count" >
              <template slot-scope="scope">
                      <span class="report_span1" @click="custleveldataDetails(scope.row.total_need_follow_cust_ids)">
                        <el-row prop='total_need_follow_cust_ids'>{{ scope.row.total_need_follow_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="14天内新数据跟进中总数" align="center" prop="day14_need_follow_count" >
              <template slot-scope="scope">
                      <span class="report_span2" @click="custleveldataDetails(scope.row.day14_need_follow_cust_ids)">
                        <el-row prop='day14_need_follow_cust_ids'>{{ scope.row.day14_need_follow_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="30天内新数据跟进中总数" align="center" prop="day30_need_follow_count" >
              <template slot-scope="scope">
                      <span class="report_span1" @click="custleveldataDetails(scope.row.day30_need_follow_cust_ids)">
                        <el-row prop='day30_need_follow_cust_ids'>{{ scope.row.day30_need_follow_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="三星总数量" align="center" prop="total_l3_count" >
              <template slot-scope="scope">
                      <span class="report_span2" @click="custleveldataDetails(scope.row.total_l3_cust_ids)">
                        <el-row prop='total_l3_cust_ids'>{{ scope.row.total_l3_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="超3天未跟进三星总数" align="center" prop="day3_total_l3_count" >
              <template slot-scope="scope">
                      <span class="report_span1" @click="custleveldataDetails(scope.row.day3_total_l3_cust_ids)">
                        <el-row prop='day3_total_l3_cust_ids'>{{ scope.row.day3_total_l3_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="超6天未跟进三星总数" align="center" prop="day6_total_l3_count" >
              <template slot-scope="scope">
                      <span class="report_span2" @click="custleveldataDetails(scope.row.day6_total_l3_cust_ids)">
                        <el-row prop='day6_total_l3_cust_ids'>{{ scope.row.day6_total_l3_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="两星总数量" align="center" prop="total_l2_count" >
              <template slot-scope="scope">
                      <span class="report_span1" @click="custleveldataDetails(scope.row.total_l2_cust_ids)">
                        <el-row prop='total_l2_cust_ids'>{{ scope.row.total_l2_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="超3天未跟进两星总数" align="center" prop="day3_total_l2_count" >
              <template slot-scope="scope">
                      <span class="report_span2" @click="custleveldataDetails(scope.row.day3_total_l2_cust_ids)">
                        <el-row prop='day3_total_l2_cust_ids'>{{ scope.row.day3_total_l2_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="超6天未跟进2星+总数" align="center" prop="day6_total_l2_count" >
              <template slot-scope="scope">
                      <span class="report_span1" @click="custleveldataDetails(scope.row.day6_total_l2_cust_ids)">
                        <el-row prop='day6_total_l2_cust_ids'>{{ scope.row.day6_total_l2_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="小贷次级总数量" align="center" prop="total_l7_count" >
              <template slot-scope="scope">
                      <span class="report_span2" @click="custleveldataDetails(scope.row.total_l7_cust_ids)">
                        <el-row prop='total_l7_cust_ids'>{{ scope.row.total_l7_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="超6天未跟进小贷次级总数" align="center" prop="day6_total_l7_count" >
              <template slot-scope="scope">
                      <span class="report_span2" @click="custleveldataDetails(scope.row.day6_total_l7_cust_ids)">
                        <el-row prop='day6_total_l7_cust_ids'>{{ scope.row.day6_total_l7_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="小贷次级总数量" align="center" prop="total_l8_count" >
              <template slot-scope="scope">
                      <span class="report_span1" @click="custleveldataDetails(scope.row.total_l8_cust_ids)">
                        <el-row prop='total_l8_cust_ids'>{{ scope.row.total_l8_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="超3天未跟进小贷次级总数" align="center" prop="day3_total_l8_count" >
              <template slot-scope="scope">
                      <span class="report_span2" @click="custleveldataDetails(scope.row.day3_total_l8_cust_ids)">
                        <el-row prop='day3_total_l8_cust_ids'>{{ scope.row.day3_total_l8_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="超6天未跟进小贷次级总数" align="center" prop="day6_total_l8_count" >
              <template slot-scope="scope">
                      <span class="report_span1" @click="custleveldataDetails(scope.row.day6_total_l8_cust_ids)">
                        <el-row prop='day6_total_l8_cust_ids'>{{ scope.row.day6_total_l8_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="四星总数量" align="center" prop="total_l4_count" >
              <template slot-scope="scope">
                      <span class="report_span2" @click="custleveldataDetails(scope.row.total_l4_cust_ids)">
                        <el-row prop='total_l4_cust_ids'>{{ scope.row.total_l4_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="超3天未跟进四星总数" align="center" prop="day3_total_l4_count" >
              <template slot-scope="scope">
                      <span class="report_span1" @click="custleveldataDetails(scope.row.day3_total_l4_cust_ids)">
                        <el-row prop='day3_total_l4_cust_ids'>{{ scope.row.day3_total_l4_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="超6天未跟进四星总数" align="center" prop="day6_total_l4_count" >
              <template slot-scope="scope">
                      <span class="report_span2" @click="custleveldataDetails(scope.row.day6_total_l4_cust_ids)">
                        <el-row prop='day6_total_l4_cust_ids'>{{ scope.row.day6_total_l4_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="5星客户总数量" align="center" prop="total_l5_count" >
              <template slot-scope="scope">
                      <span class="report_span1" @click="custleveldataDetails(scope.row.total_l5_cust_ids)">
                        <el-row prop='total_l5_cust_ids'>{{ scope.row.total_l5_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="超3天未跟进5星客户总数" align="center" prop="day3_total_l5_count" >
              <template slot-scope="scope">
                      <span class="report_span2" @click="custleveldataDetails(scope.row.day3_total_l5_cust_ids)">
                        <el-row prop='day3_total_l5_cust_ids'>{{ scope.row.day3_total_l5_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="超6天未跟进5星客户总数" align="center" prop="day6_total_l5_count" >
              <template slot-scope="scope">
                      <span class="report_span1" @click="custleveldataDetails(scope.row.day6_total_l5_cust_ids)">
                        <el-row prop='day6_total_l5_cust_ids'>{{ scope.row.day6_total_l5_count }}</el-row>
                      </span>
              </template>
            </el-table-column>
        </el-table>
        <!-- 查看客户列表 -->
        <el-dialog :title="title" :visible.sync="open" class="dialogCust" width="96%" :fullscreen="modal" append-to-body :modal="modal" :destroy-on-close="modal">
          <cust-info-list :form.sync="form"></cust-info-list>
        </el-dialog>
    </div>
</template>

<script>
import { teamCustDataStatics } from "@/api/crmsys/report/custStatics";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import { childrenAlldeptTree } from "@/api/system/user";
import { getAllDeptandUsers } from "@/api/crmsys/custinfo/custinfo";
import CustInfoList from "@/components/crmSys/custInfoList";

export default {
    name: "TeamCustDataStatics",
    components: { Treeselect,CustInfoList },
    dicts: [
        "crm_customerStatus"
    ],
    data() {
        return {
            open:false,
            modal:false,
            title:'客户列表',
            form:{},//通过from去子组件查询列表数据
            goalDate: null,
            // 周目标管理表格数据
            publicCustList: [],
            // 部门归属树选项
            deptOptions: [],
            sysUsersList: [],
            rightType :4,
            queryParams: {
                level: "6",
                status: "-1",
                params: {
                }
            },
            // 显示搜索条件
                showSearch: true,
            // 遮罩层
            loading: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {
        this.getDeptTree();
        this.getDeptAndUsers();
        this.getList();
    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {

    },
    // methods方法
    methods: {
        /** 查询周目标管理列表 */
        getList() {
            this.loading = true;
            teamCustDataStatics(this.queryParams.status,this.queryParams.level).then(response => {
                this.publicCustList = response.data.list;
                this.rightType = response.data.rightType;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                empId: null,
                orgId: null,
                visit: null,
                signed: null,
                addFriend: null,
                introduce: null,
                introduceVisit: null,
                introduceSigned: null,
                smsfollow: null,
                callTime: null,
                goalDate: null,
                createTime: null,
                updateTime: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;

            this.loading = true;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 查询部门归属下拉树结构 */
        getDeptTree() {
            var dept = { deptId: this.$store.state.user.deptid }
            childrenAlldeptTree(dept).then(response => {
                this.deptOptions = response.data;
            });
        },
        /** 获取部门归属和人员信息 */
        getDeptAndUsers() {
            getAllDeptandUsers().then((response) => {
                this.sysUsersList = response.data.sysUsersList;
            });
        },
        custleveldataDetails(ids) {
          //查询明细数据
          let inparams={};
          inparams.params={};
          inparams.params.ids=ids;
          inparams.pageNum=1;
          inparams.pageSize=10;
          this.$set(this.$data, 'form', inparams);
          this.open=true;
        },
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/command.scss';
.report_span1 {
  color: blue;
  cursor: pointer;
}
.report_span2 {
  color: rgb(231, 62, 146);
  cursor: pointer;
}
</style>
